<template>
    <div class="business">
        <div v-for="(item, index) in business_data" :key="index">
            <img class="bc_img" :src="item.b_img" />
            <div class="business_jianjie">
                <div class="first_line">
                    <div class="b_name">{{ item.b_name }}</div>
                    <div class="star">
                        <img src="../assets/img/jiyang/star.png" alt />
                        <span class="score">{{ item.b_score }}</span>
                    </div>
                </div>
                <div class="price_city">
                    <span class="day-price">￥{{ item.b_price }}</span>/天
                    <div class="city-name">
                        <img src="../assets/img/jiyang/dingwei.png" alt />
                        <span>{{ item.b_city }}</span>
                    </div>
                </div>
                <div class="bus_tag">{{ item.b_feature }}</div>
            </div>
            <div class="gailan">
                <van-divider />
                <span class="ganlan_text">概览</span>
                <div class="gailan_image">
                    <div class="image_item">
                        <img src="../assets/img/jiyang/minaji.png" alt />
                        <span>{{ item.b_JS }}㎡</span>
                    </div>
                    <div class="image_item">
                        <img src="../assets/img/jiyang/lifangti.png" alt />
                        <span>&nbsp;</span>
                    </div>
                    <div class="image_item">
                        <img src="../assets/img/jiyang/yangtai.png" alt />
                        <span>封闭阳台</span>
                    </div>
                </div>
            </div>
            <van-divider />

            <base-title>平台寄养标准</base-title>
            <div class="jiyang_items">
                <span>①定期接受资格审查及备案</span>
                <span>②保持通风卫生，封窗、无安全隐患</span>
                <span>③不超过既定寄养数量上限</span>
                <span>④定时为猫咪补充饮用水及宠主自备宠粮</span>
                <span>⑤定期向宠主反馈视频/图片</span>
                <span>⑥具备基础护理能力</span>
            </div>

            <van-divider />

            <base-title>可提供</base-title>
            <div class="tigong_image">
                <div class="image_item" v-for="item in offer" :key="item.msg">
                    <img :src="item.src" alt />
                    <span>{{ item.msg }}</span>
                </div>
                <!-- <div class="image_item">
                    <img src="../assets/img/jiyang/shuidi.png" alt />
                    <span>干净饮用水</span>
                </div>
                <div class="image_item">
                    <img src="../assets/img/jiyang/xiaodu.png" alt />
                    <span>消毒猫砂盆</span>
                </div>
                <div class="image_item">
                    <img src="../assets/img/jiyang/wanju.png" alt />
                    <span>玩具</span>
                </div> -->
            </div>
            <van-divider />
            <base-title>寄养要求</base-title>
            <div class="jiyang_yaoqiu">
                <div>
                    <img src="../assets/img/jiyang/zhengque.png" alt />
                    <span>出示疫苗本</span>
                    <img src="../assets/img/jiyang/zhengque.png" alt />
                    <span>无传染病史，定期内外驱虫</span>
                </div>
                <div>
                    <img src="../assets/img/jiyang/zhengque.png" alt />
                    <span>猫咪无攻击性</span>
                    <img src="../assets/img/jiyang/zhengque.png" alt />
                    <span>猫咪大于3个月、非妊娠期</span>
                </div>
            </div>
            <van-divider />

            <base-title>位置</base-title>

            <div class="zdy_map">
                <span class="navigation" @click="open">点击导航</span>
                <map-container :city_name="item.b_city_detail"></map-container>
            </div>

            <van-divider />

            <base-title>预订须知</base-title>
            <div class="yuding_xuzhi">
                <span>寄养入住时间：当天12：00后</span>
                <span>寄养结束时间：次日12：00前</span>
                <span>寄养期间宠主务必保持电话畅通</span>
            </div>
            <span class="yuding_btn" @click="Go_reservation(item)">立即预定</span>
            <div class="go_back" @click="Go_back">
                <img src="../assets/img/jiyang/fanhui.png" alt />
            </div>
        </div>
    </div>
</template>
  
<script>
import BaseTitle from "../components/BaseTitle.vue";
import MapContainer from "../components/MapContainer.vue";
export default {
    components: { BaseTitle, MapContainer },
    // 接收路由传参
    // props: ["b_id"],
    data() {
        return {
            business_data: null,
            offer: [
                { msg: "干净饮用水", src: require("../assets/img/jiyang/shuidi.png") },
                { msg: "消毒猫砂盆", src: require("../assets/img/jiyang/xiaodu.png") },
                { msg: "宠物玩具", src: require("../assets/img/jiyang/wanju.png") }
            ],
            city_detail: ""
        };
    },
    methods: {
        open() {
            let UserLocation = sessionStorage.getItem("position")
            let poiname = sessionStorage.getItem("city_name")
            window.open(`http://uri.amap.com/marker?position=${UserLocation[0]},${UserLocation[1]}&name=${poiname}&coordinate=gaode&callnative=1`);
        },
        Go_reservation(item) {
            // 直接调用$router.push 实现携带参数的跳转
            this.$router.push(`/reservation/${item.b_id}/${item.b_name}/${item.b_price}`);
            this.$route.query.name;
        },
        Go_back() {
            this.$router.go(-1);
        },
        getBusinessData() {
            this.$axios.get(`${this.$api.getById}/${this.$route.query.b_id}`).then(res => {
                console.log(res);
                this.business_data = res?.data?.data;
            });
        }
    },

    mounted() {
        this.getBusinessData();
    }
};
</script>
  
<style lang="scss" scoped>
.business {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: start;

    // padding-bottom: 5rem;
    .bc_img {
        width: 100%;
        height: 41rem;
        //裁减掉多余部分,不拉伸 不失真
        object-fit: cover;
    }

    .business_jianjie {
        position: absolute;
        top: 35rem;
        overflow: hidden;
        width: 100%;
        height: 12rem;
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
        background-color: white;

        .first_line {
            width: 90%;
            height: 3rem;
            margin: 0 auto;
            margin-top: 1rem;

            display: flex;
            align-items: center;

            .b_name {
                font-weight: bold;
                font-size: 1.6rem;
                line-height: 3rem;
                margin-right: 1rem;
            }

            .star {
                width: 4rem;
                height: 2rem;
                border-radius: 0.5rem;
                background-color: #f3f3f3;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 40%;
                }

                .score {
                    font-weight: bold;
                }
            }
        }

        .price_city {
            width: 90%;
            margin: 1rem auto;
            font-size: 1.4rem;
            color: #666666;
            display: flex;
            align-items: center;

            .day-price {
                font-weight: bold;
                color: black;
                font-size: 1.4rem;
            }

            .city-name {
                margin-left: 2rem;
                display: flex;
                align-items: center;
                font-size: 1.2rem;

                img {
                    width: 2rem;
                }

                span {
                    display: block;
                }
            }
        }

        .bus_tag {
            display: inline-block;
            margin-left: 2rem;
            padding: 0.5rem;
            border-radius: 0.5rem;
            background-color: #f2fcff;
            color: #2d9cdb;
        }
    }

    .gailan {
        font-size: 1.2rem;
        width: 100%;
        margin-top: 7rem;
        overflow: hidden;

        .ganlan_text {
            display: block;
            margin-top: 1.5rem;
            padding: 0 2rem 0 2rem;
            font-weight: bold;
            font-size: 1.6rem;
        }

        .gailan_image {
            color: #666666;
            display: flex;

            .image_item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                img {
                    display: block;
                    width: 3rem;
                    margin: 2rem;
                }

                span {
                    display: block;
                    margin-bottom: 2rem;
                }
            }
        }
    }

    .jiyang_items,
    .yuding_xuzhi {
        font-size: 1.4rem;
        color: #666666;
        margin-bottom: 1rem;

        span {
            padding-bottom: 1rem;
            display: block;
            margin-left: 2rem;
        }
    }

    .yuding_xuzhi {
        // margin-bottom: 10rem;
        padding-bottom: 8rem;
    }

    .tigong_image {
        font-size: 1.2rem;

        color: #666666;
        display: flex;

        .image_item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-left: 2rem;

            img {
                display: block;
                width: 3rem;
                margin: 2rem;
            }

            span {
                display: block;
                margin-bottom: 2rem;
            }
        }
    }

    .jiyang_yaoqiu {
        div {
            display: flex;
            margin-bottom: 1rem;
        }

        img {
            width: 2rem;
            margin-left: 2rem;
        }

        span {
            display: inline-block;
            line-height: 2rem;
            color: #666666;
            font-size: 1.4rem;
        }
    }

    .zdy_map {
        position: relative;
        height: 20rem;
        margin-bottom: 2rem;

        .navigation {
            display: block;
            width: 90%;
            height: 4rem;
            position: absolute;
            bottom: 0;
            background-color: #f8e176;
            color: white;
            left: 1.9rem;
            line-height: 4rem;
            text-align: center;
            font-size: 1.6rem;
        }
    }

    .yuding_btn {
        display: block;
        width: 100%;
        height: 5rem;
        background-color: #f8e176;
        color: white;
        font-size: 1.6rem;
        font-weight: bold;
        line-height: 5rem;
        text-align: center;
        position: fixed;
        bottom: 0rem;
        z-index: 1000;
    }

    .go_back {
        width: 3.5rem;
        height: 3.5rem;
        box-sizing: border-box;
        background-color: rgba($color: #ffffff, $alpha: 0.7);
        position: fixed;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 2rem;
        left: 2rem;
        padding-left: 0.75rem;

        img {
            width: 2rem;
            height: 2rem;
        }
    }
}
</style>